<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个聊天系统</title>
    <!-- 01 导入js -->
    <script src="http://localhost:5050/socket.io/socket.io.js"></script>
    <style>
        .self{text-align: right;}
        .tip{ text-align: center;}
        .tip span{ background-color: rgba(0,0,0,.3); color:#fff;padding: 4px 8px; border-radius: 30px;}
    </style>
     
</head>
<body>
    <div id="loginPage">
        <input type="text" id="username">   <button onclick="createScoket()">进入</button>
    </div>
    <div id="chartPage">
        <div id="chartBox">
            <div style="text-align:right"><a href="javascript:location.reload()">退出</a></div>
            <div id="top"></div>
        </div>
        <div>
            <textarea name="" id="content" cols="30" rows="10"></textarea>
            <button onclick="sendContent()">  发表留言</button>
        </div>
    </div>   
    <script>
        // 定义scoket 
        this.scoket =null;
        // 定义用户
        this.user = null;
        // 定义chartBox
        var  chartBox = document.getElementById("chartBox")
        // 定义chartPage
        var chartPage = document.getElementById("chartPage");
        // 默认隐藏chartPage
        chartPage.style.display= "none";
        // 创建scoket
        function createScoket(){
            // 创建连接
            this.scoket = io.connect("ws://localhost:5050");
            // 获取用户名
            var username = document.getElementById("username").value;
            // 创建用户
            this.user = {username,userid:Date.now()}
            //  监听message信息
            this.scoket.on("message",onMessage);
            // 获取登录界面
            var loginPage = document.getElementById("loginPage");
            // 隐藏登录界面
            loginPage.style.display = "none";
            // 显示chartPage 
            chartPage.style.display = "block";
            // 发送一个登录事件
            this.scoket.emit("login",this.user);
            // 监听login事件            
            this.scoket.on("login",onLogin);
            // 监听退出事件
            this.scoket.on("logout",onLogout)
        }
        // 监听message
        function onMessage(obj){
            // 输出message
            console.log(obj);
            // 创建一个div标签
            var div = document.createElement("div");
            // 添加item类名
            div.classList.add("item");
            // 函数中的this 指向函数的调用(不是window)
            if(obj.userid === window.user.userid){
                // 如果是自己
                 // 设置div内容
                div.innerHTML =`<span>${obj.content}</span>:<span>${obj.username}</span>`;
                div.classList.add("self");
            }else{
                div.innerHTML =`<span>${obj.username}</span>:<span>${obj.content}</span>`;
            }
           
            // 插入的哦chartBox
            chartBox.appendChild(div); 
        }
        // 发表留言
        function sendContent(){
            // 获取内容节点
            var content = document.getElementById("content");
            // 发送message信息
            this.scoket.emit("message",{...this.user,content:content.value});
            // 情况content内容
            content.value = "";
        }
        
        // 处理用户登录
        function onLogin(res){
            showTip(res,"进入");
        }
        function onLogout(res){
            showTip(res,"离开");
        }
        // 处理提示
        function showTip( res,str){
            console.log("有用户登录",res);
            // 创建一个div
            var div = document.createElement("div");
            // 添加class名称tip
            div.classList.add("tip");
            // 插入内容
            div.innerHTML = "<span>"+res.user.username+str+"聊天室</span>";
            // 追加到chartbox
            if(res.user.userid!=window.user.userid){
                // 不是自己加xxx进入聊天室提示
                chartBox.append(div);

            }
            // 获取div
            var top = document.getElementById("top");
            // 当前总人数
            var str = "当前总:"+res.onlineCount+"人 ";
            // 缓存arr
            var  arr = [];
            // 获取所有用户名
            for(var k in res.onlineUsers){
                arr.push(res.onlineUsers[k]);
            }
            // 把用户名用，连接
            str+=arr.join(",");
            // 更新提示
            top.innerHTML = str;
            
        }


       
        // 目标：01 进入后，用户界面
        // 02 发送信息在页面中显示
        // 03 区分自己的留言和其他
        // 03 监听login事件 显示当前有多个用户
        // 04 总共多少人 ： 显示剩余人数
    </script>
</body>
</html>